<template>
	<div class="global-verify-code" :style="cSize">
		<img :src="props.imgSrc" alt="" @click="AgainGetImageCode" />
	</div>
</template>

<script setup lang="ts" name="GlobalVerifyCode">
import { computed } from 'vue';
import { g6Throttle } from 'glasssix-utils-ts';

interface TsProps {
	width?: number;
	height?: number;
	imgSrc: string | undefined;
}
const props = withDefaults(defineProps<TsProps>(), {
	width: 122,
	height: 44,
	imgSrc: undefined
});

const emits = defineEmits<{
	(e: 'updateCode'): void;
}>();

const ThrottleFun = g6Throttle(() => emits('updateCode'), 1000);

// 点击获取验证码
const AgainGetImageCode = (): void => {
	ThrottleFun();
};

const cSize = computed(() => ({ width: `${props.width}px`, height: `${props.height}px` }));
</script>

<style lang="less" scoped>
.global-verify-code {
	position: relative;
	border-radius: 6px;

	img {
		width: 100%;
		height: 100%;
		border: 1px solid @borderColor01;
		border-radius: 6px;
		// padding: 3px 5px;
		background-color: @white;
		cursor: pointer;
	}

	p {
		position: absolute;
		bottom: -19px;
		left: 2px;
		height: 19px;
	}
}
</style>
